<template>
  <div>
    <!-- 页头 -->
    <header>
      <van-button icon="/img/left1.png" to="/"></van-button>
      <div class="ttt">【限时特价】四六级暑假班</div>
      <div class="kong"></div>
    </header>
    <div class="geduan"></div>
    <!-- 卡片 -->
    <!-- 单一文章信息开始 -->
    <div class="articleItem" v-for="n in 2" :key="n">
      <!-- 跳转到卡片  -->
      <!-- 需要修改 -->
      <router-link :to="`/detail`" >
        <!-- 文章图文信息开始 -->
        <div class="articleItem-wrapper">
          <!-- 文章图像开始  -->
          <div class="articleImg">
            <img src="https://ksimg.sparke.cn/images/english/2021/6/1276136016035418368.jpg" />
            <div class="articleItem-level">四六级</div>
          </div>
          <div class="articleItem-post">
            <!-- 文章标题开始 -->
            <div class="articleItem-header">【限时特价】四六级暑假班</div>
            <div class="articleItem-time">开课:2021.07.19~12.09 | 152课时</div>
            <!-- 标签 -->
            <div class="articleItem-teas">
              <div class="articleItem-tea">邵雯</div>
              <div class="articleItem-tea">胡贻铸</div>
              <div class="articleItem-tea">宋小明</div>
            </div>
          </div>
        </div>
      </router-link>
      <div class="articleItem-price">
        <span class="articleItem-price-hint">限购13000人</span>
        <span class="articleItem-price-number">已有10426人购买</span>
        <span class="articleItem-price-o">¥199</span>
        <span class="articleItem-price-n">¥179</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articles: []
    };
  },
  watch: {},

  methods: {},

  /** 页面元素挂载完毕后执行该生命周期方法 */
  mounted() {
    // // 发送http请求，获取的第一页文章列表
    // this.axios.get(`/course/`).then((res) => {
    //   console.log(res);
    //   // 将服务端返回的结果设置为当前列表
    //   this.articles = res.data.data;
    // });
  }
};
</script>

<style scoped>
header {
  width: 100%;
  height: 44px;
  align-items: center;
  display: flex;
  position: fixed;
  background-color: white;
  z-index: 100;
  top: 0;
  justify-content: space-around;
}
.van-icon__image {
  width: 25px;
  height: 25px;
}
header .ttt {
  height: 56px;
  font-size: 20px;
  font-weight: 400;
  line-height: 56px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 12px;
}
.kong {
  width: 56px;
  height: 56px;
}
/*  */
.geduan {
  height: 50px;
  width: 100%;
}
/* 卡片 */
.articleItem {
  display: flex;
  width: 345px;
  height: 132px;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 15px;
  border-radius: 8px;
  box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.2);
  flex-direction: column;
}
.articleItem-wrapper {
  display: flex;
}
.articleImg {
  width: 141px;
  height: 95px;
  position: relative;
}
.articleImg img {
  width: 126px;
  height: 95px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.articleItem-level {
  position: absolute;
  top: 0;
  right: 0;
  background-image: linear-gradient(90deg, #bdc9e2, #98a6c4);
  color: #fff;
  font-size: 14px;
  padding: 2.5px 6px;
  border-radius: 0 0 0 3px;
}
.articleItem-post {
  display: flex;
  flex-direction: column;
  width: 184px;
  height: 95px;
  margin-left: 10px;
  margin-right: 10px;
}
.articleItem-header {
  font-size: 14px;
  color: #222831;
  margin-top: 7px;
  width: 184px;
  height: 37px;
  font-weight: 700;
  word-wrap: break-word;
  word-break: break-all;
}
.articleItem-time {
  margin-top: 7px;
  font-size: 12px;
  line-height: 12px;
  color: #c3c7cb;
}

.articleItem-teas {
  display: flex;
  margin-top: 8px;
  height: 16px;
  flex-direction: row;
}
.articleItem-tea {
  font-size: 14px;
  color: #fff;
  line-height: 16px;
  padding: 0 6px;
  margin-right: 5px;
  background-color: #4c84ff;
  opacity: 0.4;
  border-radius: 8px 8px 0 8px;
}
.articleItem-price {
  height: 37px;
  display: flex;
  align-items: center;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  background-color: #f6f7f8;
}
.articleItem-price-hint {
  font-size: 12px;
  line-height: 18px;
  margin-left: 15px;
  color: #8d95a1;
}
.articleItem-price-number {
  font-size: 12px;
  width: 153.64px;
  line-height: 18px;
  margin-left: 15px;
  color: #8d95a1;
}
.articleItem-price-o {
  font-size: 12px;
  line-height: 18px;
  margin-right: 10px;
  text-decoration: line-through;
  color: #c3c7cb;
}
.articleItem-price-n {
  font-size: 15px;
  line-height: 22px;
  margin-right: 15px;
  color: #222831;
  font-weight: 700;
}
</style>




